import React, { useEffect } from 'react';
import * as PropTypes from 'prop-types';
import FormioFormBuilder from 'formiojs/FormBuilder';
import zh from './translations/zh'; // 国际化

const FormBuilder = (props: any) => {
  let builder: any;
  let builderReady;
  let element: any;

  props = Object.assign({ options: {}, form: {} }, props);
  let { options } = props;
  props.form.display = 'CustomDisplay'; // 限定 builder
  props.options.template = 'CustomDisplay'; // 限定 template
  props.options.i18n = {
    resources: {
      zh: { translation: zh },
    },
  };

  const emit = (funcName: any) => (...args: any[]) => {
    if (
      props.hasOwnProperty(funcName) &&
      typeof props[funcName] === 'function'
    ) {
      props[funcName](...args);
    }
  };

  const onChange = () => {
    const { onChange } = props;
    if (onChange && typeof onChange === 'function') {
      onChange(builder.instance.form);
    }
  };

  const builderEvents = [
    { name: 'saveComponent', action: emit('onSaveComponent') },
    { name: 'updateComponent', action: emit('onUpdateComponent') },
    { name: 'removeComponent', action: emit('onDeleteComponent') },
    { name: 'cancelComponent', action: emit('onUpdateComponent') },
    { name: 'editComponent', action: emit('onEditComponent') },
    { name: 'addComponent', action: onChange },
    { name: 'saveComponent', action: onChange },
    { name: 'updateComponent', action: onChange },
    { name: 'removeComponent', action: onChange },
    { name: 'deleteComponent', action: onChange },
    { name: 'pdfUploaded', action: onChange },
  ];

  const initializeBuilder = (builderProps: any) => {
    let { options, form } = builderProps;
    const { Builder } = builderProps;
    options = Object.assign({}, options);
    form = Object.assign({}, form);

    builder = new Builder(element.firstChild, form, options);
    builderReady = builder.ready;

    builderReady.then(() => {
      onChange();
      builderEvents.forEach(({ name, action }) =>
        builder.instance.on(name, action),
      );
    });
  };

  useEffect(() => {
    initializeBuilder(props);
    return () => (builder ? builder.instance.destroy(true) : null);
  }, [props.form.display, props.form.components, props.options]);

  return (
    <div ref={(el) => (element = el)}>
      <div></div>
    </div>
  );
};

FormBuilder.defaultProps = {
  options: {},
  Builder: FormioFormBuilder, // 必须先用 FormioFormBuilder 创建
  // Builder: DisplayBuilder
};

FormBuilder.propTypes = {
  form: PropTypes.object,
  options: PropTypes.object,
  onChange: PropTypes.any,
  onSaveComponent: PropTypes.func,
  onUpdateComponent: PropTypes.func,
  onDeleteComponent: PropTypes.func,
  onCancelComponent: PropTypes.func,
  onEditComponent: PropTypes.func,
  Builder: PropTypes.any,
};

export default FormBuilder;
